<!--
 * @Description: 分类页
 * @Author: rendc
 * @Date: 2023-03-09 14:31:24
 * @LastEditors: rendc
 * @LastEditTime: 2023-03-09 16:15:20
-->
<script setup>
import { ref } from "vue";
import { Icon } from 'vant';
const active = ref(0);


</script>



<template >
  <!-- 导航栏 -->
  <van-nav-bar title="商品分类" fixed="true" placeholder="true">
  </van-nav-bar>

  <div class="main">
    <div class="left">
      <!-- 侧边导航栏 -->
      <van-sidebar v-model="active">
        <van-sidebar-item>
          <template #title>
            <div><van-icon name="src/assets/空调.png" size="20" /></div>
            <div>空调</div>
          </template>
        </van-sidebar-item>
        <van-sidebar-item>
          <template #title>
            <div><van-icon name="src/assets/冰箱.png" size="20" /></div>
            <div>冰箱</div>
          </template>
        </van-sidebar-item>
        <van-sidebar-item>
          <template #title>
            <div><van-icon name="src/assets/washer.png" size="20" /></div>
            <div>洗衣机</div>
          </template>
        </van-sidebar-item>
        <van-sidebar-item>
          <template #title>
            <div><van-icon name="src/assets/微波炉.png" size="20" /></div>
            <div>厨房小电器</div>
          </template>
        </van-sidebar-item>
        <van-sidebar-item>
          <template #title>
            <div><van-icon name="src/assets/抽油烟机.png" size="20" /></div>
            <div>厨房大电器</div>
          </template>
        </van-sidebar-item>
        <van-sidebar-item>
          <template #title>
            <div><van-icon name="src/assets/电风扇.png" size="20" /></div>
            <div>生活家电</div>
          </template>
        </van-sidebar-item>
        <van-sidebar-item>
          <template #title>
            <div><van-icon name="src/assets/热水器.png" size="20" /></div>
            <div>热水/净水</div>
          </template>
        </van-sidebar-item>
        <van-sidebar-item>
          <template #title>
            <div><van-icon name="src/assets/热水器.png" size="20" /></div>
            <div>生态及配件耗材</div>
          </template>
        </van-sidebar-item>
        <van-sidebar-item>
          <template #title>
            <div><van-icon name="src/assets/热水器.png" size="20" /></div>
            <div>居家生活</div>
          </template>
        </van-sidebar-item>
        <van-sidebar-item>
          <template #title>
            <div><van-icon name="src/assets/热水器.png" size="20" /></div>
            <div>配件耗材</div>
          </template>
        </van-sidebar-item>
        <van-sidebar-item>
          <template #title>
            <div><van-icon name="src/assets/热水器.png" size="20" /></div>
            <div>家装照明</div>
          </template>
        </van-sidebar-item>
      </van-sidebar>
    </div>

    <div class="right">
      <!-- 自定义宫格 -->
      <div class="contentHead">
        <div class="title">热门品类</div>
      </div>
      <div v-if="active == 0">
        <div class="myGrid">
          <van-grid :column-num="3" icon-size="78">
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10002.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="壁挂式空调"  to="sreach"/>
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10003.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="立柜式空调" to="sreach"/>
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10004.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="中央空调" to="sreach"/>
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10007.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="移动空调" to="sreach"/>
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10282.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="天花机" to="sreach"/>
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10291.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="适用11~17㎡" to="sreach"/>
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10292.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="适用15~23㎡" to="sreach"/>
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10293.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="适用23~34㎡" to="sreach"/>
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10293.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="适用32-48㎡" to="sreach"/>
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10404.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="变频" to="sreach"/>
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10295.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="一级能效" to="sreach"/>
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10367.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="美的" to="sreach"/>
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10326.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="华凌" to="sreach"/>
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10356.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="COLMO" to="sreach"/>
          </van-grid>
        </div>
      </div>
      <div v-if="active == 1">
        <div class="myGrid">
          <van-grid :column-num="3" icon-size="78">
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10013.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="对开门冰箱" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10378.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="十字门冰箱" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10012.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="法式多门冰箱" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10379.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="风冷三门冰箱" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10282.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="风冷二门冰箱" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10381.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="直冷冰箱" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10009.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="单门冰箱" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10014.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="冷柜" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10382.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="微晶一周鲜" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10383.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="19分钟急速净味" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10325.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="COLMO" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10345.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="东芝" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10322.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="华凌" />
          </van-grid>
        </div>
      </div>
      <div v-if="active == 2">
        <div class="myGrid">
          <van-grid :column-num="3" icon-size="78">
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10016.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="滚筒洗衣机" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10017.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="波轮洗衣机" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10019.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="双缸洗衣机" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10020.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="干衣机" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10285.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="洗烘一体机" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10403.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="洗烘套装" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10297.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="美的" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10298.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="冷柜" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10382.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="小天鹅" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10284.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="COLMO" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10348.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="东芝" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10351.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="直驱变频" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10352.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="WIFI智控" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10353.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="洗护新产品" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10396.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="水魔方" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10018.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="迷你洗衣机" />
          </van-grid>
        </div>
      </div>
      <div v-if="active == 3">
        <div class="myGrid">
          <van-grid :column-num="3" icon-size="78">
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10039.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="电饭煲" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10037.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="电磁炉" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10036.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="微波炉" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10035.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="电烤箱" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10038.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="电炖锅" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10042.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="电压力锅" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10043.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="电蒸锅" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10405.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="料理机" />
          </van-grid>
        </div>
      </div>
      <div v-if="active == 4">
        <div class="myGrid">
          <van-grid :column-num="3" icon-size="78">
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10026.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="吸油烟机" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10027.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="消毒柜" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10028.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309  "
              text="燃气灶" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10029.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="烟灶套装 " />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10030.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="厨卫多件套" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10032.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="洗碗机" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10033.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="蒸烤箱" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10148.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="嵌入式厨电" />
          </van-grid>
        </div>
      </div>
      <div v-if="active == 5">
        <div class="myGrid">
          <van-grid :column-num="3" icon-size="78">
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10051.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="电风扇" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10053.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="空调扇/塔扇" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10062.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309  "
              text="除湿机" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10060.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="空气净化器" />
          </van-grid>
        </div>
      </div>
      <div v-if="active == 6">
        <div class="myGrid">
          <van-grid :column-num="3" icon-size="78">
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10022.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="燃气热水器" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10023.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="电热水器" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10024.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="空气能热水器" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10056.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="净水机" />
          </van-grid>
        </div>
      </div>
      <div v-if="active == 7">
        <div class="myGrid">
          <van-grid :column-num="3" icon-size="78">
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10026.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="吸油烟机" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10027.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="消毒柜" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10028.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309  "
              text="燃气灶" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10029.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="烟灶套装 " />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10030.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="厨卫多件套" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10032.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="洗碗机" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10033.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="蒸烤箱" />
            <van-grid-item
              icon="//pic.midea.cn/h5/img/mall/category_sub/category_10148.png?x-oss-process=image/format,webp/quality,Q_90&t=20230309"
              text="嵌入式厨电" />
          </van-grid>
        </div>
      </div>


    </div>
  </div>
</template>


<style lang="less" scoped>
:deep(.van-nav-bar__title) {
  font-weight: 400;
}


.main {
  .left {
    float: left;
    overflow: auto;

    :deep(.van-sidebar-item) {
      border-bottom: 1px solid #e3e3e3;
      border-right: 1px solid #e3e3e3;
      height: 81px;
      text-align: center;

    }

    :deep(.van-sidebar-item__text) {
      width: 80px;
      height: 18px;
      margin-top: 28px;
      font-size: 12px;
    }

    /*:deep(.van-sidebar-item--select) {
      .van-sidebar-item__text {
        /*background: linear-gradient(
          to right,
          rgb(230, 170, 92),
          rgb(208, 139, 48)
        );
        width: 80px;
        height: 18px;
        text-align: center;
        line-height: 24px;
        border-radius: 0px;
      }
    }*/
  }

  .right {
    float: right;
    background-color: rgb(255, 255, 255);
    width: calc(100vw - 81px);
    height: calc(100vh - 10px);
    padding: 0px;
    overflow: scroll;

    .contentHead {
      width: 309px;
      height: 44px;
      color: rgb(255, 255, 255);

      .title {
        float: left;
        margin-top: 17px;
        margin-left: 12px;
        color: #999999;
        font-size: 12px;
      }
    }


    .myGrid {
      background-color: #FFFFFF;
      border-radius: 0px;
      margin-top: 0px;
      padding: 0px;

      :deep(.van-hairline) {
        width: 101.97px;
        height: 127px;
      }

      :deep(.van-grid-item__text) {
        color: #333333;
      }
    }
  }
}
</style>

<style>
:root {
  /*顶部标题样式 */
  --van-nav-bar-title-font-size: 18px;
  --van-nav-bar-title-text-color: #0093d5;
  /* 侧边导航的宽度 */
  --van-sidebar-width: 81px;
  --van-sidebar-font-size: 12px;
  --van-sidebar-text-color: #666666;
  --van-sidebar-background: rgba(244, 244, 244);
  --van-sidebar-selected-font-weight: 12px;
  --van-sidebar-padding: 0px;
  --van-sidebar-selected-text-color: #0093D5;
  --van-sidebar-selected-background: rgba(244, 244, 244);
  /*--van-sidebar-selected-border-color:rgba(244, 244, 244);*/
  --van-sidebar-selected-border-width: 0px;
  /* --van-grid-item-text-color: red; */
}
</style>